<template>
    <div id="print" style="height: 100%">
        <navbar :title="title" class="header-title-00 header-title-01">
            <template #right>
                <div class="header-icon" v-if="!isInvalid">
                    <van-icon v-if="!directionShow" @click="onLandscape" size="30" name="expand-o" />
                    <van-icon v-else @click="onPortrait" size="30" name="shrink" />
                </div>
            </template>
        </navbar>
        <div v-if="!isInvalid" class="content" style="overflow: auto;">
            <div class="body-content" style="height: calc(100% - 44px);" :class="directionShow? 'iframe-class' : 'transverse'">
                <div v-html="contentHtml"></div>
            </div>
        </div>
        <div  v-if="isInvalid" class="message-erro">
            <van-icon name="warning" size="80" color="#ffa847" />
            <div class="msg">{{ $t('invalid_qr_code') }}</div> <!-- 无效二维码 -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'check-cert-details',
    components: {},
    data() {
        return {
            title: this.$t('check_cert'), // 查看证书
            directionShow: false,
            contentHtml: '',
            isInvalid: false
        };
    },
    methods: {
        back() {
            // 跳转到登录页
            this.$router.push({path: '/'});
        },
        /**
         * 横屏
         */
        onLandscape() {
            this.directionShow = true;
            if (window.plus) {
                window.plus.screen.lockOrientation('landscape-primary');
            }
        },
        /**
         * 竖屏
         */
        onPortrait() {
            this.directionShow = false;
            if (window.plus) {
                window.plus.screen.lockOrientation('portrait-primary');
            }
        },
        /**
         * 获取证书信息
         */
        getCertInfo() {
            let url = location.search;
            if (!url) {
                url = location.hash.replace('#', '');
            }
            if (url.indexOf('?') !== -1) {
                let str = url.split('?')[1];
                let urlParams = {};
                const params = str.split('&');
                for (let item of params) {
                    urlParams[item.split('=')[0]] = item.split('=')[1];
                }
                if (!urlParams.entId || !urlParams.itmId || !urlParams.certType || !urlParams.certId) {
                    this.isInvalid = true;
                    return;
                }
                this.$axios({
                    method: 'GET',
                    url: '/app/api/trainee/cert/scan-code',
                    params: {
                        entId: urlParams.entId,
                        itmId: urlParams.itmId,
                        type: urlParams.certType,
                        certId: urlParams.certId
                    }
                }).then(res => {
                    this.title = res.data.certTitle;
                    this.contentHtml = res.data.certContent;
                });
            }
        }
    },
    mounted() {
        this.getCertInfo();
    }
};
</script>

<style scoped lang="less">
#print {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.iframe-class{
    transform: rotate(90deg);
    position: relative;
    height: 100vw;
    min-width: 650px;
    width: calc(100vh - 56px);
    padding: 56px 0 0 0;
}
.transverse{
    height: calc(100% - 56px);
    padding: 56px 0 0 0;
}
.header-icon{
    height: 56px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/.van-icon{
        color: #ccc;
    }
}
.message-erro{
    height: 100vh;
    padding: 150px 15px;
    text-align: center;
    background: #ffffff;
}
.msg{
    margin-top: 30px;
    text-align: center;
    font-size: 15px;
    color: #333;
}
</style>
